<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>u</title>
</head>
<style>
    div {
        display: flex;
        width: 500px;
        height: 300px;
        background-color: pink;
        /*flex-direction: column;*/
        justify-content: space-between;
        flex-wrap: wrap;
    }
    div span {
        width: 150px;
        height: 100px;
        background-color: purple;
    }
    p {
        display: flex;
        margin: 100px auto;
        width: 60%;
        height: 300px;
        background-color: pink;
    }
    p span {
        flex: 1;
        height: 100px;
        background-color: yellow;
        border: 1px solid red;
    }
    p span:first-child {
        flex: 2;

    }
</style>
<body>
    <div>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>
</body>
</html>